<!DOCTYPE html>
<html lang="zh_cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>图片上传</title>

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
	<script src="jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="fileUpload.css">
</head>
<script>
	$(function(){
		$(".cebian>div").click(function(e){
			$(this).css("color","#5CACEE");
			$(this).css("background","#ccc");
			$(this).siblings().css("color","#000");
			$(this).siblings().css("background","#e0e0e0");
		})
	})
</script>
<body>
	<!-- 顶部 -->
	<div class="top">
		<h3>下载页面</h3>
		<div>
			<input type="text">
			<a href="#"><img src="images/search.jpg" alt=""></a>
		</div>
	</div>
	<!-- 侧边 -->
	<div class="cebian">
		<div><div class="heightLight" >全部文件</div></div>
		<div>图片</div>
		<div>文档</div>
		<div>视频</div>
		<div>种子</div>
		<div>音乐</div>
		<div>其他</div>
	</div>
	<!-- 主体 -->
	<div class="box">
		<!-- </p> -->
		<!-- <p>上传头像</p> -->
		<div class="boxTop">
        <p>
	        <div class="upload imgLog2">
				<span><i class="glyphicon glyphicon-open"></i>上传</span>
			</div>
		</p>

        <p>
	        <div class="upload imgLog2">
				<span><i class="glyphicon glyphicon-open"></i>新建文件夹</span>
			</div>
		</p>
        <p>
	        <div class="upload imgLog2">
				<span><i class="glyphicon glyphicon-open"></i>下载</span>
			</div>
		</p>
		</div>
		<div class="zhong">
			<div><input type="checkbox">文件名</div>
			<div>大小</div>
			<div>修改日期</div>
		</div>
		<hr/>
		<p>暂无下载或保存</p>
	</div>
    <script src="index.js"></script>
	<script>
		$(function(){
			var img2 = new ImgUpload('.imgLog2',100,30,30);

            $(document).on('change',".imgLog2 input",function(e){
		    	//模拟后台返回url
		    	var url = window.URL.createObjectURL(e.target.files[0]);
		    	$(this).parent().css('background','url('+url+')0% 0% / cover')
			    img2.setSpan(this)
			})							

		})

	</script>
</body>
</html>